<template>
	<view>
		<view class="statuBar" :style="{height:getStatusBarHeight()+'px'}"></view>
		<view class="search-title">
			<uni-icons type="left" color="#888" size="28" @click="back"></uni-icons>
			<up-search :show-action="true" actionText="搜索" v-model="searchValue" :actionStyle="{
				color: '#FF4D4F'
			}" @search="search" @custom="search"></up-search>
		</view>
		<Line></Line>
		<view class="search-item">
			<view class="search-item-title">
				<view>最近搜索</view>
				<uni-icons type="trash" color="#888" size="26" @click="deleteHistory"></uni-icons>
			</view>
			<view class="search-item-content">
				<view class="search-item-name" v-for="(item,index) in recentSearch" :key="index"
					@click="searchValue=item.content">
					{{item.content}}
				</view>
			</view>
		</view>

		<view class="search-item">
			<view class="search-item-title">
				<view>热门搜索</view>
			</view>
			<view class="search-item-content">
				<view class="search-item-name" v-for="(item,index) in hotSearch" :key="index"
					@click="searchValue=item.content">
					{{item.content}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Line from '@/components/Line.vue'
	import {
		ref,
		createApp,
		onMounted
	} from 'vue';
	import {
		getStatusBarHeight,
		getTitleBarHeight,
		getNavBarHeight,
		getLeftIconLeft,
	} from '@/utils/system.js'
	import {
		appUrl
	} from '../../main';

	const back = () => {
		uni.navigateBack()
	}
	const searchValue = ref('');
	let recentSearch = ref([])
	let hotSearch = ref([{
		content: "红烧肉"
	}, {
		content: "牛肉"
	}, {
		content: "鸡翅"
	}])

	const search = () => {
		uni.setStorage({
			key: 'storage_search',
			data: searchValue.value,
			success: function() {
				console.log(searchValue.value);
			}
		});
		uni.navigateTo({
			url: '../SearchList/SearchList'
		})
	}

	const token = uni.getStorageSync("token");

	const deleteHistory = () => {
		uni.request({
			url: appUrl + '/history/delete',
			header: {
				'token': token
			},
			method: "POST"
		}).then((res) => {
			if (res.data.status == 200) {
				getRecentSearch()
			} else {
				console.log('服务异常');
			}
		})
	}

	const getRecentSearch = async () => {
		try {
			uni.request({
				url: appUrl + '/history/get',
				header: {
					'token': token
				},
				method: "GET"
			}).then((res) => {
				if (res.data.status == 200) {
					recentSearch.value = res.data.data
				} else {
					console.log('服务异常');
				}
			})
		} catch (error) {
			console.error('请求失败:', error);
		}
	}

	onMounted(() => {
		getRecentSearch()
	})
</script>

<style lang="scss" scoped>
	.search-title {
		display: flex;
		align-items: center;
		padding: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		gap: 10rpx;
	}

	.search-box {
		width: 520rpx;
	}

	.search-button {
		color: white;
		background-color: #ff4d4f;
		border: #ff4d4f;
		border-radius: 30rpx;
	}

	.search-item {
		padding: 30rpx;
		padding-bottom: 40rpx;
	}

	.search-item-title {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
	}

	.search-item-content {
		padding-top: 20rpx;
	}

	.search-item-name {
		padding: 4rpx 24rpx;
		background-color: #F8F8F8;
		display: inline-block;
		border-radius: 26rpx;
		margin: 10rpx;
		color: #888;
	}
</style>